<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>    
</head>
<body>
    <div id="app">        
      <el-table
        :data="books"
        border
        style="width: 900px">
        <el-table-column
          prop="f_id"
          label="书号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="f_title"
          label="书名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="f_author"
          label="作者">
        </el-table-column>
        <el-table-column
          prop="f_type"
          label="类型">
        </el-table-column>
        <el-table-column
          prop="f_price"
          label="价格">
        </el-table-column>
      </el-table>
      <div>总价格：￥{{totalPrice}}</div>
    </div> 
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/vuex.js"></script>
    <script src="js/store.js"></script>
    <script src="js/moment.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> 

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                    
                    books:[], //图书数组                    
                   
            },

            //计算属性
            computed: {
              totalPrice(){
                  let sum = 0;
                  this.books.forEach(bk=>sum += bk.f_price)
                  return sum;
              },
            },

            //方法
            methods:{
                f1(){
                    let _this = this //保存对Vue实例的引用

                    //发出ajax请求，获取服务器中图书表的记录
                    axios.get('http://localhost:8888/Book/Index')
                         .then(function (rs) {
                        _this.books = rs.data //将获取的图书保存到数组
                    })

                },
                
            },
            //生命周期：类似webform的 XX_load( )
            created(){
                this.f1()
            },
        })
    </script>
</body>
</html>